<template>
  <div id="APICall">
    <v-header title="API调用" :saveShow="false" :showDownloadBtn="false"></v-header>
    <div class="APICallCon">
      <top-toolbar v-on:operate="handleToolClick" :buttonsObj="buttonsObj"></top-toolbar>
      <!--请求地址-->
      <div class="APICallFrom">
        <el-row :gutter="20">
          <el-col :span="2">
            <el-select v-model="ajaxTypeVal" placeholder="请选择">
              <el-option
                size="mini"
                v-for="item in ajaxType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <!--<el-col :span="2">-->
            <!--<el-select v-model="ajaxFormatVal" placeholder="请选择">-->
              <!--<el-option-->
                <!--size="mini"-->
                <!--v-for="item in ajaxFormat"-->
                <!--:key="item.value"-->
                <!--:label="item.label"-->
                <!--:value="item.value">-->
              <!--</el-option>-->
            <!--</el-select>-->
          <!--</el-col>-->
          <el-col :span="16">
            <el-input v-model="ajaxHrl" placeholder="请输入地址,以http开头"></el-input>
          </el-col>
        </el-row>
        <!--添加参数-->
        <div class="addQueryDiv clear" v-if="addQueryShow">
          <p class="addQueryTitle">请求参数</p>
          <div class="addQueryCLass" v-for="(item,index) in addQueryObj" :key="index">
            <el-row :gutter="10">
              <el-col :span="4">
                <el-input v-model="item.queryName" placeholder="参数名称"></el-input>
              </el-col>
              <el-col :span="4">
                <el-input v-model="item.queryVal" placeholder="参数数值"></el-input>
              </el-col>
              <el-col :span="2"><i class="el-icon-close" @click="deleteQuery(index)"></i></el-col>
            </el-row>
          </div>
        </div>
        <!--添加header值-->
        <div class="addQueryDiv clear" v-if="addHeaderShow">
          <p class="addQueryTitle">Header参数</p>
          <div class="addQueryCLass" v-for="(item,index) in addHeaderObj" :key="index">
            <el-row :gutter="10">
              <el-col :span="4">
                <el-input v-model="item.headerName" placeholder="Header名称"></el-input>
              </el-col>
              <el-col :span="4">
                <el-input v-model="item.headerVal" placeholder="Header数值"></el-input>
              </el-col>
              <el-col :span="2"><i class="el-icon-close" @click="deleteHeader(index)"></i></el-col>
            </el-row>
          </div>
        </div>
        <!--添加cookie-->
        <div class="addQueryDiv clear" v-if="cookieShow">
          <p class="addQueryTitle"> Cookie（没有就不用填入）</p>
          <div class="addQueryCLass">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-input type="textarea" v-model="addCookieVal" placeholder="请输入Cookie" resize="none"></el-input>
              </el-col>
            </el-row>
          </div>
        </div>
        <!--返回的header值-->
        <div class="headerValCallback">
          <el-row :gutter="20">
            <el-col :span="10">
              <p class="headerValTitle">header返回值</p>
              <el-input type="textarea" :autosize="{ minRows: 8, maxRows: 4}" v-model="headerInfo" placeholder="请求返回的Header信息"></el-input>
            </el-col>
            <el-col :span="10">
              <p class="headerValTitle">Response Body （返回值是JSON，会自动格式化） </p>
              <el-input type="textarea" :autosize="{ minRows: 8, maxRows: 4}" v-model="callbackJsonVal" placeholder="Response Body info"></el-input>
            </el-col>
          </el-row>
        </div>
        <!--发送请求-->
        <div class="fabuAjax">
          <el-button type="primary" @click="ajaxClick()">发送请求</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import {VHeader} from '../../../../../components'
  import TopToolbar from '../../../../../components/TopToolbar/TopToolbar'
  import axios from 'axios'
  export default {
    components: {
      VHeader,
      TopToolbar
    },
    data () {
        return {
          headerInfo: '', // header返回值
          callbackJsonVal: '', // 返回json值
          cookieShow: '', // cookie是否添加
          addCookieVal: '', // 添加cookie值
          addQueryShow: false, // 参数添加是否显示
          addHeaderShow: false,
          addQueryObj: [], // 参数添加对象集合
          addHeaderObj: [], // Header对象集合
          ajaxTypeVal: 'post', // 请求方式val
          ajaxHrl: '', // 请求地址
//          ajaxFormatVal: 'UTF-8', // 请求格式val
          ajaxType: [
              {
            value: 'GET',
            label: 'GET'
          },
            {
            value: 'POST',
            label: 'POST'
          }
          ], // 请求方式
          ajaxFormat: [
            {
              value: 'UTF-8',
              label: 'UTF-8'
            },
            {
              value: 'GBK',
              label: 'GBK'
            },
            {
              value: 'GB2312',
              label: 'GB2312'
            }
          ], // 请求格式
          buttonsObj: [
            {
              text: '添加参数',
              oprType: 'addQuery'
            },
            {
              text: '添加Header',
              oprType: 'addHeader'
            }
//            {
//              text: '添加Cookie',
//              oprType: 'addCookie'
//            }
          ]
        }
    },
    methods: {
//        请求发送
      ajaxClick () {
         if (this.ajaxHrl === '') {
           this.$message({
             message: '请输入地址',
             type: 'warning'
           })
              return
          }
        let objHeader = {}
        this.addHeaderObj.forEach(item => {
          let arr = []
          for (let key in item) {
            arr.push(item[key])
          }
          objHeader[arr[0]] = arr[1]
        })
        let objData = {}
        this.addQueryObj.forEach(item => {
          let arr = []
          for (let key in item) {
            arr.push(item[key])
          }
          objData[arr[0]] = arr[1]
        })
        axios({
          method: this.ajaxTypeVal,
          url: this.ajaxHrl,
          data: objData,
          headers: objHeader
        }).then(res => {
          this.headerInfo = JSON.stringify(res.headers)
          this.callbackJsonVal = JSON.stringify(res.data)
        })
      },
//        删除参数
      deleteQuery (index) {
//          删除当前参数
        this.addQueryObj.splice(index, 1)
        if (this.addQueryObj.length === 0) {
          this.addQueryShow = false
        }
      },
//      删除Header
      deleteHeader (index) {
        this.addHeaderObj.splice(index, 1)
        if (this.addHeaderObj.length === 0) {
          this.addHeaderShow = false
        }
      },
      handleToolClick (val) {
        switch (val) {
          case 'addQuery':
            this.addQueryObj.push({'queryName': '', 'queryVal': ''})
            this.addQueryShow = true
            break
          case 'addHeader':
            this.addHeaderObj.push({'headerName': '', 'headerVal': ''})
            this.addHeaderShow = true
            break
          case 'addCookie':
            this.cookieShow = true
        }
      }
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  #APICall
    height 100%
    .APICallCon
      padding:10px
      height calc(100% - 56px)
      overflow auto
      overflow-x hidden
    .APICallFrom
      background #fff
      margin-top 10px
      padding 10px
      .addQueryDiv
        margin-top 10px
        .addQueryCLass
          height 45px
          line-height 45px
          margin-top 10px
      .headerValCallback
        margin-top 15px
        .headerValTitle
          margin-bottom 10px
      .fabuAjax
        margin-top 10px
        display flex
        justify-content flex-end
        align-items flex-end
    .el-select
     margin-right 0
</style>
